<template>
  <view class="box">
    <!-- 地址 -->
    <view class="box1">
      <dizhi></dizhi>
    </view>
    <!-- 宠物信息 -->
    <view class="box2">
      <view>宠物信息</view>
      <view class="box21">
        <view class="bxo1left">
          <image src="/static/logo.png" mode="" />
        </view>
        <view class="bxo1right">
          <view class="bxo1right1">
            这是宠物名称
          </view>
          <view class="bxo1right2">
            狗狗
          </view>
        </view>
      </view>
      <view class="box22">
        <view class="">上门时间</view>
        <view style="color: #a1a1a1;">2023-05-17 16:40-17:40</view>
      </view>
    </view>
    <view class="box3">
      <view class="box31">
        <view class="bxo1left">
          <image src="/static/logo.png" mode="" />
        </view>
        <view class="bxo1right">
          <view class="bxo1right1">
            服务名称服务名称
          </view>
          <view class="bxo1right2">
            ￥80/次
          </view>
        </view>
      </view>
    </view>
    <!--  -->
    <view class="box4">
      <view class="">订单信息</view>
      <view class="box41">
        <view class="">订单编号</view>
        <view style="color: #a1a1a1;">1223346578989</view>
      </view>
      <view class="box41">
        <view class="">下单时间</view>
        <view style="color: #a1a1a1;">2023-05-17 16:40-17:40</view>
      </view>
      <view class="box41">
        <view class="">备注信息</view>
        <view style="color: #a1a1a1;">这是备注信息</view>
      </view>
    </view>
    <!--  -->
    <view class="box5">
      <view class="box51">
        <button class="but">附加补价</button>
        <button class="but">接通视频</button>
        <button class="but">完成任务</button>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  import dizhi from '@/components/dizhi/dizhi.vue'
  import bezel from "@/components/bezel/bezel.vue"
  components: {
    bezel
  }
</script>

<style lang="scss">
  @import url("services1.scss");
</style>